<template>
  <div class="mainMenu">
    <div class="hd_bg_img">
      <div class="hd_img">
        <img :src="logoUrl" style="width: 15vw; height: 15vw;" alt="图片未正常加载!">
      </div>
      <!-- 姓名 + 切换登录角色-->
      <div class="hd_text">
        <p class="p1" style="display: flex; line-height: normal; align-items: baseline;">
          {{ userName }}
          <ChangeRole></ChangeRole>
        </p>
        <!--学院信息 -->
        <p class="p3">{{ collegeName }}</p>
      </div>
      <!--退出登录  -->
      <div class="home_header_exit" @click="exit()">
        <img src="/src/image/home_icon_exit.png" alt="<?>">
      </div>
    </div>

    <div class="menuList">
      <van-grid :column-num="2" icon-size="2.7rem">
        <van-grid-item
            v-for="item in menuList"
            :key="item.name"
            :icon="getIconURL(item.iconClass)"
            :text="item.itemName"
            @click="onClick(item)"
        />
        <van-grid-item v-if="(length % 2 !== 0)"/>
      </van-grid>
    </div>
  </div>
</template>

<script>
import {useUserStore} from "/@/store/modules/user";
import {getMainMenu} from '/@/api/getMainMenu';
import {useRouter} from 'vue-router';
import {Dialog, Notify} from 'vant';
import 'vant/es/dialog/style';
import wx from "weixin-js-sdk";
import {getLogoUrl} from '/src/api/index'
import ChangeRole from "./ChangeRole.vue";

export default {
  components: {ChangeRole},

  setup() {
    const router = useRouter();
    const data = reactive({
      filePath: '',
      menuList: [],
      userName: '',
      collegeName: '',
      length: 0,
      logoUrl: getLogoUrl(),
      showUser: false,
      currentAcademy: '',
      index: 2,
      userList: [
        {text: '角色1', value: '0'},
        {text: '角色2', value: '1'},
        {text: '角色3', value: '2'},
        {text: '角色4', value: '3'},
        {text: '角色5', value: '4'},
        {text: '角色6', value: '5'},
        {text: '角色7', value: '6'},
        {text: '角色8', value: '7'},
      ]
    });

    const initData = async () => {
      const useUser = useUserStore();

      /*data.userName = useUser.getUserInfo.stud.name;
      data.className = useUser.getUserInfo.stud.className;
      data.specialName = useUser.getUserInfo.specialName;
      console.log('useUser', useUser.getUserInfo)
      data.userId = useUser.getUserInfo.stud.id;*/


      data.filePath = '/jwfilepath/wxLogo/favicon.png';

      const object = JSON.parse(localStorage.getItem('USERINFO'));
      console.log('USERINFO', object);
      data.userName = object.teacher.name;
      data.collegeName = object.teacher.collegeName;

      // console.log('useUser', useUser.getUserInfo)
      localStorage.setItem('loginflag', "loginold")

      const resMenu = await getMainMenu();

      data.menuList = resMenu.response.value.extend.menuList.map((item) => {
        return {
          "iconClass": item.iconClass,
          "itemName": item.itemName,
          "itemBg": item.itemBg,
          "href": item.href
        }
      })

      function addItem(href, iconClass, itemName) {
        data.menuList.push({
          href,
          iconClass,
          itemBg: "#fff",
          itemName,
          type: null,
        });
      }

      addItem("/listenClass", "jwxt_gywm_icon", "听课管理");
      addItem("/questionNaire", "jwxt_wjgl_icon", "问卷调查");

      data.length = data.menuList.length;
    };

    const onClick = (item) => {
      // 处理点击逻辑
      if (item.href) {
        router.push(item.href)
      }
    }

    const getIconURL = (iconClass) => {
      return new URL(`../../assets/image/${iconClass}.png`, import.meta.url).href;
    }

    const exit = () => {
      // const flag = localStorage.getItem('openIdFlag');
      // if (flag === "noOpen") {
      //   Dialog.confirm({
      //     message: '确认退出教务系统?',
      //   }).then(() => {
      //     wx.closeWindow();
      //   })
      // }else if(flag === "isOpen"){
      //   Dialog.confirm({
      //     message: '确认退出教务系统?',
      //   }).then(async () => {
      //     const ret = await logoutByOpenid();
      //     if(200 === ret.response.value.code){
      //       wx.closeWindow();
      //     }
      //   })
      // }

      Dialog.confirm({
        message: '确认退出教务系统?',
      }).then(() => {
        wx.closeWindow();
      })
    }

    //切换登录角色
    const handleChange = () => {
      data.showUser = true
    }
    const handleSubmit = (value) => {
      //把这里的value替换当前用户

      //关闭
      data.showUser = false;
    }
    onMounted(() => {
      initData();
    });

    return {
      ...toRefs(data),
      onClick,
      exit,
      getIconURL,
      handleChange,
      handleSubmit,
    }
  }
}

</script>

<style scoped lang="less">
.hd_bg_img {
  position: relative;
  border: 0.8px solid white;
  border-radius: 20px;
  height: 20vh;
  background-image: url(../../image/head_b_g.jpg);
  background-size: cover;
  background-position: center;
  padding: 30px;
  margin: 18px;
  display: flex;
}

.hd_img {
  position: absolute;
  display: inline-block;
  width: 15vw;
  height: 15vw;
  overflow: hidden;
  vertical-align: middle;
  align-items: center;
  border-radius: 50%;
}

.hd_img img {
  //width: 17vw;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 2px #fff;
}

.hd_text {
  position: absolute;
  display: inline-block;
  color: #fff;
  font-weight: 300;
  height: 15vw;
  left: 25vw;
  vertical-align: middle;
  align-items: center;
  padding-top: 1px;
}

.hd_text {
  .p1 {
    font-size: 5.5vw;
    font-weight: 500;
    text-align: center;
  }

  .p3 {
    font-size: 3.5vw;
    font-weight: 500;
    margin-top: 2vw;
  }

}

.home_header_exit {
  position: absolute;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  width: 12vw;
  height: 12vw;
  overflow: hidden;
  border-radius: 10vw;
  vertical-align: middle;
  margin-left: 75vw;
  margin-top: 2vw;
}

.home_header_exit img {
  position: absolute;
  max-width: 50%;
  max-height: 50%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  margin-left: 1vw;
}

.van-grid-item {
  width: 50vw;
  height: 30vw;
}

.menuList {
  overflow: auto;
  margin: 27px 28px 0;
}
</style>
